Description
Le langage JavaScript est au fil des années sorti de l’ombre pour devenir aujourd’hui un langage incontournable dans la conception d’applications web riches, de Progressive Web App. L’explosion des frameworks « client » comme jQuery, ReactJS, Angular, ou d’environnements de développement JavaScriptcôté « serveur » comme NodeJS, témoignent de l’engouement des développeurs pour la technologie JavaScript.
Cette formation présente les concepts de base de JavaScript, en balayant les nouveautés ES6, l’approche du développement en modèle « non bloquant », NodeJS et Express pour l’exploitation de JavaScript côté Serveur, les manipulations du DOM (Document Object Model) par l’intermédiaire de jQuery ainsi que les outils de « build » facilitant le déploiement de vos applications, et facilitant l’écriture de CSS au travers de LESSCSS et SASS.
A l’issue de la formation, le stagiaire sera capable de développer des sites et des applications web avec le langage de programmation Javascript.
Objectifs
- Appréhender Javascript dans la construction de sites et applications web
- Maîtriser les fonctionnalités essentielles
- Manipuler les pages et les rendre dynamiques
- Gérer les/Réagir aux événements et accroître l'interactivité
- Développer en Responsive Design
Récapitulatif
Public
Développeurs Web, architectes web, chefs de projet, webmasters…
Prérequis
Posséder des connaissances en langages HTML et CSS et en programmation structurée.
Méthodes et modalités pédagogiques
Formation réalisée en Présentiel, Distanciel ou Dual-Learning selon la formule retenue.
Moyens et supports pédagogiques
Mise à disposition d'un poste de travail sur nos formations en Présentiel.
Mise à disposition de nos environnements de visio sur nos formations en Distanciel
Remise d'une documentation pédagogique numérique pendant la formation
La formation est constituée d'apports théoriques, d'exercices pratiques et de réflexions
Dans le cas d'une formation sur site Entreprise, le client s'engage à avoir toutes les ressources pédagogiques nécessaires (salle, équipements, accès internet, TV ou Paperboard...) au bon déroulement de l'action de formation conformément aux prérequis indiqués dans le programme de formation
Modalités de suivi et d'évaluations
Auto-positionnement des stagiaires avant la formation
Émargement des stagiaires et formateur par 1/2 journée
Exercices de mise en pratique ou quiz de connaissances tout au long de la formation permettant de mesurer la progression des stagiaires
Auto-évaluation des acquis de la formation par les stagiaires
Questionnaire de satisfaction à chaud et à froid à l'issue de la formation
Programme détaillé
Appréhender Javascript dans la construction de sites et applications web
- Rappels sur le fonctionnement d'un site internet ou d'une application web
- Environnement de développement
- Utiliser HTML5 avec CSS3 et Javascript
- Principes du DOM
- Exemples de travaux pratiques : le formateur montre la création d'une page HTML simple (ou page/site existant) avec l'utilisation de balises, d'éléments de style (CSS). Une touche de javascript permet d'identifier le rôle du langage et son utilisation, ainsi que sa relation avec le DOM.
Maîtriser les fonctionnalités essentielles (1/2)
- Exécution de Javascript
- Côté client : Appel d'un script dans une page web
- Côté serveur : Appel d'un script avec NodeJS
- Exemples de travaux pratiques : le formateur montre des exemples et exécutions de code JS dans une page web ou via NodeJS. Les participants peuvent créer une nouvelle page HTML et charger un script JS qui fait des actions simples (exemple message console ou alerte). Les participants peuvent lancer un script via NodeJS.
Maîtriser les fonctionnalités essentielles (2/2)
- Syntaxes de bases d'écriture du langage
- Mots-clés (let, const)
- Fonctions
- Les fonctions fléchées
- Les fonctions de manipulation de données : map, filter, forEach…
- La programmation orientée objet en ES6
- Définition des classes
- L'opérateur new
- Modification d'un objet : getter / setter
- Héritage
- Rétrocompatibilité
- Table des compatibilités
- Polyfills
- Compilateurs
- Exemples de travaux pratiques : le formateur réalise et explique différentes syntaxes que les participants reproduisent et exécutent sur leur poste de travail.
Manipuler les pages et les rendre dynamiques
- Introduction à l'API DOM
- Format de données JSON
- Insérer ou récupérer des données dans les pages (balises data, )
- Exemples de travaux pratiques : le formateur utilise l'API DOM pour sélectionner et modifier des balises. Il insère des données JSON dans la page. Les participants peuvent créer une nouvelle page HTML ou compléter leur page précédente en intégrant des données JSON dans la page. Par exemple : affichage d'une liste de produits, ou données météos.
Gérer les/Réagir aux événements et accroître l'interactivité
- Gérer les évènements
- Ecouter les événements
- Réagir aux événements
- Notion de callback
- Introduction aux traitements asynchrones et requêtes AJAX
- Exemples de travaux pratiques : le formateur utilise l'API DOM pour créer des écouteurs d'événements et traitements associés en callback. Il réalise une requête AJAX (par exemple pour l'envoi d'un formulaire). Les participants peuvent créer une nouvelle page HTML ou compléter leur page précédente en intégrant des évènements. Par exemple : chargement de données après un clic, envoi de formulaire, etc.
Développer en Responsive Design
- La méthode matchMedia (équivalent des Media Queries pour JavaScript)
- La détection des périphériques avec l'User-Agent
- Rétrocompatibilité (tables de compatibilité et polyfills)
- Exemples de travaux pratiques : le formateur utilise matchMedia et détecte le périphérique qui accède à la page web grâce à l'User-Agent. Les participants peuvent créer une nouvelle page HTML ou compléter leur page précédente en intégrant des traitements spécifiques à un type de périphérique (par exemple iOS ou Android) ou à une résolution (avec matchMedia). Il peut s'agir par exemple de créer un menu ou des onglets qui s'affichent différemment en fonction des résolutions et/ou types de périphériques.
Découvrir et utiliser une librairie ou un Framework Javascript
- Limites du JavaScript natif dans les projets complexes
- Les différences principales entre librairie et Framework
- Cas d'usage typiques des librairies et Frameworks : fonctionnalités types (agenda, graphiques…), SPA, DOM complexe, gestion de l'état, routing, accès API...
- Identifier et utiliser des annuaires et gestionnaires de dépendances pour installer des librairies en tout sécurité (npm,…)
- Exemples de travaux pratiques : le formateur utilise une librairie, selon les besoins ressentis par le groupe, par exemple Chart.js pour créer des graphiques sur une page web. Les participants peuvent créer une nouvelle page HTML en intégrant une librairie de leur choix.